<template>
  <div class="container">
    <div class="warehouse-list">
      <div
        v-for="(item, index) in dataList"
        :key="index"
        class="warehouse-item"
        @click="warehouseItem(item.warehouseNo)"
      >
        <div class="data-title">
          <div class="label">仓库名称：</div>
          <div class="value">{{ item.warehouseName }}</div>
        </div>
        <div class="data-titletwo">各农资存储量</div>
        <div class="left-img">
          <img src="~@/assets/housestorage/hdcwe.png" alt="" />
        </div>
        <div class="right-data">
          <div
            v-for="(items, indexs) in item.currentMaterialValueList"
            :key="indexs"
            class="data-line"
          >
            <div class="value">{{ items.goodsName }}</div>
            <div class="value">{{ items.value }}{{ items.unitName }}</div>
          </div>
        </div>
      </div>
    </div>
    <el-dialog
      title="仓库出入库记录"
      :visible.sync="dialogFormVisible"
      width="40%"
    >
      <selectbutton
        :buttonselectlist="buttonselectlist"
        @nowselectbuttonindex="topitemtype"
      />
      <div class="search">
        <span>
          <el-radio-group
            v-model="dateType"
            @change="getwarehousePage"
          >
            <el-radio-button
              v-for="(city, index) in dateList"
              :key="index"
              :label="city.type"
            >{{ city.name }}</el-radio-button>
          </el-radio-group>
        </span>
        <span>
          <el-date-picker
            v-model="datePick"
            type="daterange"
            range-separator="至"
            value-format="yyyy-MM-dd"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="getwarehousePage"
          />
        </span>
      </div>
      <el-table
        v-if="topitemtypeid === 0"
        v-loading="loading"
        :data="tableData"
        stripe
        border
        height="calc(100% - 50px)"
      >
        <el-table-column type="index" label="序号" width="100" />
        <el-table-column
          prop="typeName"
          label="出库类型"
        />
        <el-table-column
          prop="goodsName"
          label="出库农资"
        />
        <el-table-column
          prop="changeValue"
          label="出库量"
        >
          <template slot-scope="scope">
            {{ scope.row.changeValue }} {{ scope.row.unitName }}
          </template>
        </el-table-column>
        <el-table-column prop="value" label="仓库剩余容量">
          <template slot-scope="scope">
            {{ scope.row.value }} {{ scope.row.unitName }}
          </template>
        </el-table-column>
        <el-table-column
          prop="personName"
          label="出库人"
        />
        <el-table-column
          prop="changeTime"
          label="出库时间"
        />
      </el-table>
      <el-table
        v-if="topitemtypeid === 1"
        v-loading="loading"
        :data="tableData"
        stripe
        border
        height="calc(100% - 50px)"
      >
        <el-table-column type="index" label="序号" width="100" />
        <el-table-column
          prop="typeName"
          label="入库类型"
        />
        <el-table-column
          prop="goodsName"
          label="入库农资"
        />
        <el-table-column
          prop="changeValue"
          label="入库量"
        >
          <template slot-scope="scope">
            {{ scope.row.changeValue }} {{ scope.row.unitName }}
          </template>
        </el-table-column>
        <el-table-column prop="value" label="仓库剩余容量">
          <template slot-scope="scope">
            {{ scope.row.value }} {{ scope.row.unitName }}
          </template>
        </el-table-column>
        <el-table-column
          prop="personName"
          label="入库人"
        />
        <el-table-column
          prop="changeTime"
          label="入库时间"
        />
      </el-table>
      <Pagination
        :page-size="pageSize"
        :current-page="currentPage"
        :total-size="totalSize"
        @changePageSize="changePageSize"
        @changeCurrentPage="changeCurrentPage"
      />
    </el-dialog>
  </div>
</template>

<script>
import api from "@/api/digital-operation/warehouse-inventory/warehouse-inventory.js";
import selectbutton from "@/components/selectbutton/index.vue";
import Pagination from "@/components/Pagination";
export default {
  // eslint-disable-next-line vue/name-property-casing
  name: "warehouse-inventory",
  components: { selectbutton, Pagination },
  data() {
    return {
      dataList: [],
      topitemtypeid: 0,
      buttonselectlist: [{ name: "出库" }, { name: "入库" }],
      dialogFormVisible: false,
      // table
      loading: false,
      // 当前页
      currentPage: 1,
      // 每页的数据条数
      pageSize: 10,
      // 总条数
      totalSize: 0,
      tableData: [],
      warehouseNo: "",
      twarehouseType: "",
      dateList: [
        {
          name: "本周",
          type: "work"
        },
        {
          name: "本月",
          type: "month"
        },
        {
          name: "本年",
          type: "year"
        },
        {
          name: "全部",
          type: ""
        }
      ],
      dateType: "",
      datePick: []
    };
  },
  mounted() {
    this.getTableDataList();
  },
  methods: {
    // 获取点击的分页index
    topitemtype(e) {
      this.topitemtypeid = e;
      if (this.topitemtypeid === 0) {
        this.twarehouseType = "出库";
      } else {
        this.twarehouseType = "入库";
      }
      this.getwarehousePage();
    },
    async getTableDataList() {
      let params = {
        page: 1,
        size: 999,
        entity: {
          warehouseSystem: "生产",
          organizationNo: sessionStorage.organizationNo
        }
      };
      const { data: data } = await api.getCurrentMaterialValue(params);
      this.dataList = data.content;
    },
    async warehouseItem(e) {
      this.warehouseNo = e;
      this.dialogFormVisible = true;
      if (this.topitemtypeid === 0) {
        this.twarehouseType = "出库";
      } else {
        this.twarehouseType = "入库";
      }
      this.tableData = []
      this.getwarehousePage();
    },
    async getwarehousePage() {
      let startTime
      let endTime
      if (this.dateType === 'year') {
        let year = new Date().getFullYear();
        startTime = year + '-01-01'
        endTime = year + '-12-30'
      } else if (this.dateType === 'month') {
        let dateStart = new Date(new Date(new Date().toLocaleDateString()).getTime());
        dateStart.setDate(1);
        // 获取当前月的最后一天
        let dateEnd = new Date();
        let currentMonth = dateEnd.getMonth();
        let nextMonth = ++currentMonth;
        let nextMonthFirstDay = new Date(dateEnd.getFullYear(), nextMonth, 1);
        let oneDay = 1000 * 60 * 60 * 24;
        let end = new Date(nextMonthFirstDay - oneDay + 24 * 60 * 60 * 1000 - 1);
        startTime = this.dateToFormattwo(dateStart)
        endTime = this.dateToFormattwo(end)
      } else if (this.dateType === 'work') {
        let dateStart = new Date(new Date(new Date().toLocaleDateString()).getTime());
        // 今天是这周的第几天
        let today = dateStart.getDay();
        // 上周日距离今天的天数（负数表示）
        let stepSunDay = -today + 1;
        // 如果今天是周日
        if (today === 0) {
          stepSunDay = -7;
        }
        // 周一距离今天的天数（负数表示）
        let stepMonday = 7 - today;
        let time = dateStart.getTime();
        // let times = dateEnd.getTime();
        let monday = new Date(time + stepSunDay * 24 * 3600 * 1000);
        let sunday = new Date(time + stepMonday * 24 * 3600 * 1000 + 24 * 60 * 60 * 1000 - 1);
        startTime = this.dateToFormattwo(monday)
        endTime = this.dateToFormattwo(sunday)
      } else if (this.datePick.length > 0) {
        startTime = this.dateToFormattwo(this.datePick[0])
        endTime = this.dateToFormattwo(this.datePick[1])
      }
      let params = {
        page: this.currentPage,
        size: this.pageSize,
        entity: {
          warehouseNo: this.warehouseNo,
          reason: this.twarehouseType,
          startTime: startTime,
          endTime: endTime
        }
      };
      const { data: data } = await api.getCurrentMaterialChange(params);
      this.tableData = data.content;
      this.totalSize = data.totalElements;
      this.addblankmet();
    },
    addblankmet() {
      let havline = this.tableData.length % this.pageSize;
      if (this.tableData.length < this.pageSize) {
        if (havline < this.pageSize) {
          const remain = this.pageSize - havline;
          for (var i = 0; i < remain; i++) {
            this.tableData.push({
              index: i + this.tableData.length - 1
            });
          }
        }
      }
    },
    search() {
      this.currentPage = 1;
      this.getwarehousePage();
    },
    changePageSize(pageSize) {
      this.pageSize = pageSize;
      this.getwarehousePage();
    },
    changeCurrentPage(currentPage) {
      this.currentPage = currentPage;
      this.getwarehousePage();
    }
  }
};
</script>

<style lang="scss" scoped>
@import "~@/styles/variables.scss";
.container {
  width: 100%;
  height: 100%;
}
.warehouse-list {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  padding: 16px;
  .warehouse-item {
    width: calc(33% - 1%);
    margin-left: 1%;
    border: 1px solid $tagsViewActiveBgColor;
    border-radius: 8px;
    padding: 16px;
    display: flex;
    justify-content: flex-start;
    // justify-content: space-between;
    margin-bottom: 16px;
    flex-direction: row;
    flex-wrap: wrap;
    .data-title {
      width: 100%;
      display: flex;
      margin-bottom: 16px;
    }
    .data-titletwo {
      width: 100%;
      display: flex;
      justify-content: center;
      background: initial;
      padding: 10px 0;
      background: $headerBg;
      margin-bottom: 16px;
    }
    .left-img {
      width: 40%;
      height: 120px;
      flex-shrink: 0;
      // margin-right: 50px;
      padding: 5px;
      // border: 1px solid $inputBorderColor;
      // border-radius: 8px;
      background: $headerBg;
      > img {
        width: 100%;
        height: 100%;
      }
    }
    .right-data {
      background: $headerBg;
      width: 60%;
      height: 120px;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
      overflow-y: auto;
      padding: 5px;
      .label {
        width: 100%;
        font-size: 20px;
        font-weight: 500;
        text-align: center;
      }
      .data-line {
        margin-bottom: 16px;
        display: flex;
        width: 100%;
        padding: 5px;
        justify-content: flex-start;
        margin-bottom: 5px;
        background: $subMenuBg;
        & .value:first-child {
          border-left: 5px solid $activeMenuText;
          width: 50%;
          padding-left: 10%;
          box-sizing: border-box;
          color: $activeMenuText;
        }
      }
    }
    &:nth-child(2n) {
      margin-left: 16px;
    }
  }
}
::v-deep .el-dialog__wrapper {
  .el-dialog {
    width: 80vw !important;
    height: 80vh;
    .el-dialog__body {
      height: 100%;
    }
    .el-table {
      height: 100%;
      max-height: 100% !important;
    }
  }
}
::v-deep .el-date-editor {
  color: #000;
  .el-range-input {
  color: #000;
  }
}
.search {
  padding: 10px 10px;
}
::v-deep .pagination {
  color: #000;
  .el-pagination {

  .el-pagination__total {
    color: #000 ;
  }
  .el-pager {
    .number {

    color: #000 ;
    }
  }
  .el-icon {
    color: #000;
  }
  .el-pagination__jump {

    color: #000 ;
  }
  }
}
</style>
